import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_small_project/api/user.dart';
import 'package:flutter_small_project/utils/Toast.dart';
import 'package:image_picker/image_picker.dart';

import '../../utils/eventBus.dart';

class ProfilePage extends StatefulWidget {
  const ProfilePage({super.key, required this.userInfo});
  final Map<String, dynamic> userInfo;

  @override
  State<ProfilePage> createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  // 接收用户信息
  // Map<String, dynamic> userInfo = {
  //   "id": '',
  //   "avatar": '',
  //   "nickName": '',
  // };

  // 创建控制器
  final TextEditingController _nickNameController = TextEditingController();

  // 是否选择图片
  bool isSelectPhoto = false;
  // 是否正在上传中
  bool isUploading = false;
  //
  String fileName = "";

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // 最好直接通过Widget使用获取的值,如果使用setState()方法,将获取的值赋值给userInfo,那么在跳转之后渲染页面时会产生一定的延迟,影响用户的体验
    // setState(() {
    //   userInfo = widget.userInfo;
    // });
    // 获取昵称
    if (widget.userInfo['nickName'] != null &&
        widget.userInfo['nickName'] != '') {
      _nickNameController.text = widget.userInfo['nickName'];
      setState(() {});
    }
  }

  // 获取头像
  Widget _getAvatar() {
    return widget.userInfo['avatar'] != null && widget.userInfo['avatar'] != ''
        ? Image.network(
            widget.userInfo['avatar'],
            width: 30,
            height: 30,
          )
        : Image.asset(
            'assets/images/avatar_1.jpg',
            width: 30,
            height: 30,
          );
  }

// 选择需要上传的图片
  _selectImage() async {
    // 创建图片选择器
    final ImagePicker picker = ImagePicker();
    // 选择图片的来源 source:表示从哪里选择图片
    // gallery:表示从相册选择图片
    // camera:表示从相机选择图片
    final XFile? image = await picker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      // 将变量 isSelectPhoto 赋值为true
      isSelectPhoto = true;
      // 获取图片名称
      fileName = image.name;
      // 表示选择图片成功
      PromptAction.showSuccess('图片选择成功');
      setState(() {
        // 将选择图片头像地址赋值给userInfo
        widget.userInfo['avatar'] = image.path;
      });
      // 关闭弹唱
      Navigator.pop(context);
    }
  }

  // 击头像弹出选择框
  void _showAvatarDialog() {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return SizedBox(
            width: double.infinity,
            height: 180,
            child: Column(
              children: [
                Container(
                  alignment: Alignment.center,
                  height: 60,
                  decoration: const BoxDecoration(
                      border: Border(
                          bottom: BorderSide(width: 0.5, color: Colors.grey))),
                  child: const Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(Icons.camera_alt),
                      SizedBox(
                        width: 10,
                      ),
                      Text(
                        "拍照",
                        style: TextStyle(fontSize: 20),
                      )
                    ],
                  ),
                ),
                Container(
                  alignment: Alignment.center,
                  height: 60,
                  decoration: const BoxDecoration(
                      border: Border(
                          bottom: BorderSide(width: 0.5, color: Colors.grey))),
                  child: GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: () {
                      // print('点击了相册模块');
                      _selectImage();
                    },
                    child: const Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.photo_album),
                        SizedBox(
                          width: 10,
                        ),
                        Text(
                          "相册",
                          style: TextStyle(fontSize: 20),
                        )
                      ],
                    ),
                  ),
                ),
                Container(
                  alignment: Alignment.center,
                  height: 60,
                  child: GestureDetector(
                    onTap: () {
                      Navigator.pop(context);
                    },
                    child: const Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.cancel_outlined),
                        SizedBox(
                          width: 10,
                        ),
                        Text(
                          "取消",
                          style: TextStyle(fontSize: 20),
                        )
                      ],
                    ),
                  ),
                )
              ],
            ),
          );
        });
  }

  // 保存用户信息
  _saveUserInfo() async {
    // 首先需要判断昵称是否为空
    if (_nickNameController.text.isEmpty) {
      return PromptAction.showError('昵称不能为空');
    }
    //判断昵称是否符合规则
    //\u4e00-\u9fa5 表示所有的中文字符
    RegExp reg = RegExp(r'^[\u4e00-\u9fa5_a-zA-Z0-9]{2,20}$');
    if (!reg.hasMatch(_nickNameController.text)) {
      return PromptAction.showError('昵称格式不正确');
    }

    //[目标]需要上传图片的请求
    //[思路]:
    //1.当点击保存时,说明开始上传图片,不能再次触发点击保存,可以使用isUploading来判断
    //2.我们需要判断是否需要上传图片,通过自定义变量isSelectPhoto来判断

    // isUploading:目的避免重复上传图片
    if (!isUploading) {
      // 说明此时可以上传
      //  立刻将isUploading设置为true,为了避免重复上传图片
      isUploading = true;
      if (isSelectPhoto) {
        // 此时表明需要上传图片
        //[目标]:上传图片
        //[实现步骤]:
        // 1.创建FormData对象,使用FormData.fromMap方法,该方法可以将Map类型的对象转换为FormData类型对象
        // 2.

        FormData formData = FormData.fromMap({
          // 使用MultipartFile.fromBytes方法,该方法可以将字节数组转换为MultipartFile类型

          // file 需要一个二进制数据 -> 已知有blob临时地址
          // fromBytes 生成二进制数据
          "file": MultipartFile.fromBytes(
              // value 就是二进制数据
              //
              await XFile(widget.userInfo['avatar']).readAsBytes(),
              filename: fileName,
              contentType: DioMediaType('image', 'png')),
          "type": "avatar"
        });

        // 发送请求
        final res = await uploadUserAvatarAPI(formData);
        // PromptAction.showInfo(res['url']);
        setState(() {
          // 将新的地址赋给avatar
          widget.userInfo['avatar'] = res['url'];
        });

        // 将isUploading设置为true,为了避免重复上传图片
        isUploading = true;
        // 将isSelectPhoto设置为false,为了下次上传图片时,可以再次触发点击保存
        isSelectPhoto = false;
        // 文件名修改成''
        fileName = "";
      }
      //发送请求保存呢称
      updateUserInfoAPI({
        "nickName": _nickNameController.text,
        "avatar": widget.userInfo['avatar']
      });
      // 提示昵称修改成功
      PromptAction.showSuccess('昵称修改成功');
      // 通知该页面重新获取用户信息
      eventBus.fire(LogSuccessEvent());
      //将isUploading设置为false,为了下次上传图片时,可以再次触发点击保存
      isUploading = false;
    } else {
      // 提示正在上传图片
      return PromptAction.showInfo('正在上传中,请稍后重试');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('个人信息'),
        backgroundColor: Colors.transparent,
        centerTitle: true,
      ),
      body: ListView(
        padding: const EdgeInsets.all(10),
        children: [
          SizedBox(
            height: 40,
            child: Row(
              children: [
                const Text(
                  '头像',
                  style: TextStyle(fontSize: 16),
                ),
                // 此处的Spacer()相当于前端中的flex:1,鸿蒙中的layoutWeight(1)
                const Spacer(),
                Row(
                  children: [
                    ClipRRect(
                        borderRadius: BorderRadius.circular(50.0),
                        child: GestureDetector(
                          onTap: () {
                            _showAvatarDialog();
                          },
                          child: _getAvatar(),
                        )),
                    const Icon(Icons.arrow_forward_ios, size: 12)
                  ],
                )
              ],
            ),
          ),
          Row(
            children: [
              const Text('昵称'),
              const Spacer(),
              Expanded(
                child: TextField(
                  controller: _nickNameController,
                  decoration: const InputDecoration(
                    hintText: '请输入昵称',
                    border: InputBorder.none,
                  ),
                  textAlign: TextAlign.right,
                ),
              ),
              const Icon(Icons.arrow_forward_ios, size: 12)
            ],
          ),
          const SizedBox(
            height: 20,
          ),
          Row(
            children: [
              Expanded(
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: const Color.fromARGB(255, 85, 145, 175),
                    minimumSize: const Size(100, 50),
                  ),
                  onPressed: () {
                    _saveUserInfo();
                  },
                  child: const Text(
                    '保存',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                    ),
                  ),
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}
